<html>

<head>
  <title>HTML selects accessible states tests</title>
  <link rel="stylesheet" type="text/css"
        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script type="application/javascript"
          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript"
          src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

  <script type="application/javascript"
          src="../common.js"></script>
  <script type="application/javascript"
          src="../role.js"></script>
  <script type="application/javascript"
          src="../states.js"></script>
  <script type="application/javascript"
          src="../events.js"></script>

  <script type="application/javascript">
    function openComboboxNCheckStates(aID)
    {
      this.combobox = getAccessible(aID);
      this.comboboxList = this.combobox.firstChild;
      this.comboboxOption = this.comboboxList.firstChild;

      this.eventSeq = [
        new invokerChecker(EVENT_FOCUS, this.comboboxOption)
      ];

      this.invoke = function openComboboxNCheckStates_invoke()
      {
        getNode(aID).focus();
        synthesizeKey("VK_DOWN", { altKey: true });
      }

      this.finalCheck = function openComboboxNCheckStates_invoke()
      {
        // Expanded state on combobox.
        testStates(this.combobox, STATE_EXPANDED);

        // Floating state on combobox list.
        testStates(this.comboboxList, STATE_FLOATING);
      }

      this.getID = function openComboboxNCheckStates_getID()
      {
        return "open combobox and test states";
      }
    }

    //gA11yEventDumpToConsole = true;

    var gQueue = null;
    function doTest()
    {
      // combobox
      var combobox = getAccessible("combobox");
      testStates(combobox,
                 STATE_HASPOPUP | STATE_COLLAPSED | STATE_FOCUSABLE, 0,
                 STATE_FOCUSED, 0);

      var comboboxList = combobox.firstChild;
      testStates(comboboxList, STATE_INVISIBLE, 0, STATE_FOCUSABLE, 0);

      var opt1 = comboboxList.firstChild;
      testStates(opt1, STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,
                 EXT_STATE_ACTIVE, STATE_FOCUSED, 0);

      var opt2 = comboboxList.lastChild;
      testStates(opt2, STATE_SELECTABLE | STATE_FOCUSABLE, 0, STATE_SELECTED, 0,
                 STATE_FOCUSED, EXT_STATE_ACTIVE);

      // collapsed combobox
      testStates("collapsedcombobox",
                 STATE_COLLAPSED | STATE_FOCUSABLE, 0,
                 STATE_FOCUSED, 0);

      testStates("collapsed-1",
                 STATE_FOCUSABLE | STATE_SELECTABLE, 0,
                 STATE_OFFSCREEN | STATE_INVISIBLE, 0);

      testStates("collapsed-2",
                 STATE_OFFSCREEN, 0,
                 STATE_INVISIBLE, 0);

      // listbox
      testStates("listbox",
                 STATE_FOCUSABLE, 0,
                 STATE_HASPOPUP | STATE_COLLAPSED | STATE_FOCUSED);

      testStates("listitem-active",
                 STATE_FOCUSABLE | STATE_SELECTABLE, EXT_STATE_ACTIVE,
                 STATE_SELECTED | STATE_FOCUSED);

      testStates("listitem",
                 STATE_FOCUSABLE | STATE_SELECTABLE, 0,
                 STATE_SELECTED | STATE_FOCUSED, EXT_STATE_ACTIVE);

      testStates("listitem-disabled",
                 STATE_UNAVAILABLE, 0,
                 STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,
                 EXT_STATE_ACTIVE);

      testStates("listgroup",
                 0, 0,
                 STATE_UNAVAILABLE | STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,
                 EXT_STATE_ACTIVE);

      testStates("listgroup-disabled",
                 STATE_UNAVAILABLE, 0,
                 STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,
                 EXT_STATE_ACTIVE);

      todo(false, "no unavailable state on option in disabled group (bug 759666)");
//      testStates("listitem-disabledgroup",
//                 STATE_UNAVAILABLE, 0,
//                 STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,
//                 EXT_STATE_ACTIVE);

      testStates("listbox-disabled",
                 STATE_UNAVAILABLE, 0,
                 STATE_FOCUSABLE);

      todo(false, "no unavailable state on option in disabled select (bug 759666)");
//      testStates("listitem-disabledlistbox",
//                 STATE_UNAVAILABLE, 0,
//                 STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,
//                 EXT_STATE_ACTIVE);

      // open combobox
      gQueue = new eventQueue();
      gQueue.push(new openComboboxNCheckStates("combobox"));
      gQueue.invoke(); // Will call */SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  </script>

</head>

<body>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=443889"
     title="mochitest for selects and lists">
    Mozilla Bug 443889
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=640716"
     title="mochitest for selects and lists">
    Mozilla Bug 640716
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=689847"
     title="Expose active state on current item of selectable widgets">
    Mozilla Bug 689847
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=756983"
     title="Isolate focusable and unavailable states from State()">
    Mozilla Bug 756983
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=907682"
     title=" HTML:option group position is not correct when select is collapsed">
    Mozilla Bug 907682
  </a>
  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <select id="combobox">
    <option>item 1</option>
    <option>item 2</option>
  </select>

  <select id="collapsedcombobox">
    <option id="collapsed-1">item 1</option>
    <option id="collapsed-2">item 2</option>
  </select>

  <select id="listbox" name="component" size="3">
    <option id="listitem-active">Build</option>
    <option id="listitem">Disability Access APIs</option>
    <option id="listitem-disabled" disabled>General</option>
    <optgroup id="listgroup" label="group">
      <option>option</option>
    </optgroup>
    <optgroup id="listgroup-disabled" disabled label="group2">
      <option id="listitem-disabledgroup">UI</option>
    </optgroup>
  </select>

  <select id="listbox-disabled" size="3" disabled>
    <option id="listitem-disabledlistbox">option</option>
  </select>

</body>
</html>
